<template>
  <div class="device-container" v-if="deviceConfigList.length">
    <div class="parkinglot-device-top">
      <div class="parkinglog-name">{{ $route.query.parkName }}</div>
    </div>
    <div class="device-bd">
      <div class="device-item" v-for="(item, index) in deviceConfigList">
        <div class="top-main-info" @click="item.uiOpt.isShowDetail = !item.uiOpt.isShowDetail">
          <div class="info-item">{{ item.channelConfigVo.entranceName }}</div>
          <div class="info-item">{{ item.channelConfigVo.customCode }}</div>
          <div class="device-top-tabs">
            <div class="tab-item" v-if="item.cardMachineDeviceVo !== null">
              <img
                src="../../../../../assets//img/ic_open_success.svg"
                alt
                v-if="item.cardMachineDeviceVo.status === 1"
              />

              <img src="../../../../../assets//img/ic_warning.svg" alt v-if="item.cardMachineDeviceVo.status === 0" />
              刷卡机
            </div>
          </div>
          <div class="device-backend-wrap" v-if="false">
            <span>进入设备后台</span>
          </div>
          <div class="show-detail" v-if="item.cardMachineDeviceVo">
            <i class="el-icon-caret-bottom" :class="{ rotate180: item.uiOpt.isShowDetail }"></i>
          </div>
        </div>

        <div class="device-item-bd" v-if="item.uiOpt.isShowDetail && item.cardMachineDeviceVo">
          <div class="device-change-tips" v-if="item.changeFlag && !item.deviceExceptionStatus">
            <i class="el-icon-warning"></i> 设备信息已更新，请保存
          </div>
          <div class="device-change-tips" v-if="item.deviceExceptionStatus">获取不到设备信息，请检查网络连接</div>

          <div class="device-item-bd-items">
            <div class="device-item-bd-item" v-if="item.cardMachineDeviceVo !== null">
              <div class="top-title">
                刷卡机 (
                <span v-if="item.cardMachineDeviceVo.status === 1">正常</span>
                <span v-if="item.cardMachineDeviceVo.status === 0">断线</span>)
              </div>
              <div class="item-bd">
                <el-form label-position="left" label-width="98px" class="device-form" size="small">
                  <template
                    v-if="
                      !item.uiOpt.isEdit || (item.uiOpt.isEdit && parkConfigInfo.parkCloudDetailVo.deviceModel === 0)
                    "
                  >
                    <el-form-item label="设备名称" label-width="68px">{{
                      item.cardMachineDeviceVo.cardMachineName
                    }}</el-form-item>
                    <el-form-item
                      label="IP"
                      label-width="68px"
                      :class="{ error: item.cardMachineDeviceVo.ipChangeFlag }"
                      >{{ item.cardMachineDeviceVo.ip }}</el-form-item
                    >
                    <el-form-item
                      label="子网掩码"
                      label-width="68px"
                      :class="{ error: item.cardMachineDeviceVo.ipChangeFlag }"
                    >
                      {{ item.cardMachineDeviceVo.mask }}
                    </el-form-item>
                    <el-form-item
                      label="默认网关"
                      label-width="68px"
                      :class="{ error: item.cardMachineDeviceVo.ipChangeFlag }"
                    >
                      {{ item.cardMachineDeviceVo.gateway }}
                    </el-form-item>
                    <el-form-item
                      label="DNS"
                      label-width="68px"
                      :class="{ error: item.cardMachineDeviceVo.ipChangeFlag }"
                    >
                      {{ item.cardMachineDeviceVo.dns }}
                    </el-form-item>
                  </template>

                  <template v-if="item.uiOpt.isEdit && parkConfigInfo.parkCloudDetailVo.deviceModel === 1">
                    <el-form-item label="设备名称" label-width="68px">
                      <el-input placeholder="设备名称" v-model="item.cardMachineDeviceVo.cardMachineName"></el-input>
                    </el-form-item>
                    <el-form-item label="IP地址" label-width="68px">
                      <el-input placeholder="IP地址" v-model="item.cardMachineDeviceVo.ip"></el-input>
                    </el-form-item>
                    <el-form-item label="子网掩码" label-width="68px">
                      <el-input placeholder="子网掩码" v-model="item.cardMachineDeviceVo.mask"></el-input>
                    </el-form-item>
                    <el-form-item label="默认网关" label-width="68px">
                      <el-input placeholder="默认网关" v-model="item.cardMachineDeviceVo.gateway"></el-input>
                    </el-form-item>
                    <el-form-item label="DNS" label-width="68px">
                      <el-input placeholder="dns" v-model="item.cardMachineDeviceVo.dns"></el-input>
                    </el-form-item>
                  </template>

                  <el-form-item label="设备ID" label-width="54px">{{
                    item.cardMachineDeviceVo.cardMachineId
                  }}</el-form-item>
                  <el-form-item label="有线网络状态" :class="{ error: item.cardMachineDeviceVo.status === 0 }">{{
                    item.cardMachineDeviceVo.status === 1 ? '正常' : '断线'
                  }}</el-form-item>
                  <el-form-item label="IP设置">{{
                    parkConfigInfo.parkCloudDetailVo.deviceModel === 0 ? '自动获取' : '手动设置'
                  }}</el-form-item>
                </el-form>
              </div>
            </div>
          </div>

          <div class="action" v-if="!item.uiOpt.isEdit && isPermmited('PARK:CONFIG:MANAGE:DEVICE:UPDATE')">
            <el-button type="text" @click="editDeviceItem(item)">编辑</el-button>
            <el-button type="text" class="del-icon" @click="delDevice(item, index)">删除</el-button>
          </div>

          <div class="action isEditing" v-if="item.uiOpt.isEdit">
            <el-button type="primary" size="medium" @click="changeDeviceItem(item)">保存</el-button>
            <el-button type="primary" size="medium" plain @click="cancelEdit(deviceConfigList, index)">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pageScript from './index.js';
export default pageScript;
</script>

<style lang="less" scoped>
@import './index.less';
</style>
